import React, { useState, useEffect } from "react";
import yaml from "js-yaml";

type ConfigType = {
  pageTitle: string;
  logoUrl: string;
};

const FigListComp: React.FC = () => {
  const [config, setConfig] = useState<ConfigType | null>(null);

  useEffect(() => {
    async function fetchConfig() {
      try {
        const response = await fetch("/api/config.yaml");
        const yamlText = await response.text();
        const parsedConfig = yaml.load(yamlText) as ConfigType;
        setConfig(parsedConfig);
      } catch (e) {
        console.log("fetch config error:" + e);
      }
    }

    fetchConfig();
  }, []);

  if (!config) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{config.pageTitle}</h1>
      <img src={config.logoUrl} alt="Logo" />
    </div>
  );
};

export default FigListComp;
